var contentPath = [];
var contentCanvas;
(function () {
  //变量声明
  var mouseFrom = {},
    mouseTo = {},
    drawType = null,
    canvasObjectIndex = 0,
    textbox = null;
  var drawWidth = 2; //笔触宽度
  var color = "#E34F51"; //画笔颜色
  var drawingObject = null; //当前绘制对象
  var moveCount = 1; //绘制移动计数器
  var doDrawing = false; // 绘制状态
  var doButton = false;

  //初始化画板
  var canvas = new fabric.Canvas("canvas", {
	isDrawingMode: true,
    skipTargetFind: false,
	controlsAboveOverlay:true
  });

  window.canvas = canvas;
  window.zoom = window.zoom ? window.zoom : 1;

  canvas.freeDrawingBrush.color = color; //设置自由绘颜色
  canvas.freeDrawingBrush.width = drawWidth;

  //绑定画板事件
  
  
  canvas.on("mouse:down", function (options) {
    var xy = transformMouse(options.e.offsetX, options.e.offsetY);
    mouseFrom.x = xy.x;
    mouseFrom.y = xy.y;
	doDrawing = true;
	if(doDrawing&&doButton){
		drawing();
	}
	
  });
  canvas.on("mouse:up", function (options) {
    var xy = transformMouse(options.e.offsetX, options.e.offsetY);
    mouseTo.x = xy.x;
    mouseTo.y = xy.y;
    drawingObject = null;
    moveCount = 1;
    doDrawing = false;
	doButton = false;
	mouseFrom = {}
	mouseTo = {}
	contentPath = [];
  });
  
  canvas.on("mouse:move", function (options) {
    if (moveCount % 2 && !doDrawing) {
      //减少绘制频率
      return;
    }
    moveCount++;
    var xy = transformMouse(options.e.offsetX, options.e.offsetY);
    mouseTo.x = xy.x;
    mouseTo.y = xy.y;
	if(doDrawing&&doButton){
		drawing();
	}
  });

  canvas.on("selection:created", function (e) {
	  
	  var el = e.target;
	  console.log(el)
	  if(el.name = "close"){
		for (var i = 0; i < el.path.length; i++) {
			var area = el.path[i]
			canvas.add(new fabric.Point(area[1],area[2]))
		}
		
	  }
  });

  //坐标转换
  function transformMouse(mouseX, mouseY) {
    return { x: mouseX / window.zoom, y: mouseY / window.zoom };
  }

  //绑定工具事件
  jQuery("#toolsul").find("li").on("click", function () {
      //设置样式
      jQuery("#toolsul").find("li>i").each(function () {
          jQuery(this).attr("class", jQuery(this).attr("data-default"));
        });
      jQuery(this).addClass("active").siblings().removeClass("active");
      jQuery(this).find("i").attr("class",jQuery(this).find("i").attr("class").replace("black", "select"));
      drawType = jQuery(this).attr("data-type");
      canvas.isDrawingMode = false;
	  doButton = true;
      if (textbox) {
        //退出文本编辑状态
        textbox.exitEditing();
        textbox = null;
      }
      if (drawType == "pen") {
        canvas.isDrawingMode = true;
      } else if (drawType == "remove") {
        canvas.selection = true;
        canvas.skipTargetFind = false;
        canvas.selectable = true;
      } else {
        //canvas.skipTargetFind = true; //画板元素不能被选中
        canvas.selection = false; //画板不显示选中
      }
    });

  //绘画方法
  

  function drawing() {
    if (drawingObject) {
      canvas.remove(drawingObject);
    }
    var canvasObject = null;
    switch (drawType) {
      case "arrow": //箭头
        canvasObject = new fabric.Path(drawArrow(mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y, 30, 30), {
          stroke: color,
          fill: "rgba(255,255,255,0)",
          strokeWidth: drawWidth
        });
        break;
      case "line": //直线
        canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
          stroke: color,
          strokeWidth: drawWidth
        });
        break;
      case "dottedline": //虚线
        canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
          strokeDashArray: [3, 1],
          stroke: color,
          strokeWidth: drawWidth
        });
        break;
      case "circle": //正圆
        var left = mouseFrom.x,
          top = mouseFrom.y;
        var radius = Math.sqrt((mouseTo.x - left) * (mouseTo.x - left) + (mouseTo.y - top) * (mouseTo.y - top)) / 2;
        canvasObject = new fabric.Circle({
          left: left,
          top: top,
          stroke: color,
          fill: "rgba(255, 255, 255, 0)",
          radius: radius,
          strokeWidth: drawWidth,
		  selectable:true,
		  selection:true
        });
        break;
      case "ellipse": //椭圆
        var left = mouseFrom.x,
          top = mouseFrom.y;
        var radius = Math.sqrt((mouseTo.x - left) * (mouseTo.x - left) + (mouseTo.y - top) * (mouseTo.y - top)) / 2;
        canvasObject = new fabric.Ellipse({
          left: left,
          top: top,
          stroke: color,
          fill: "rgba(255, 255, 255, 0)",
          originX: "center",
          originY: "center",
          rx: Math.abs(left - mouseTo.x),
          ry: Math.abs(top - mouseTo.y),
          strokeWidth: drawWidth
        });
        break;
      case "square": //TODO:正方形（后期完善）
        break;
      case "rectangle": //长方形
        var path =
          "M " +
          mouseFrom.x +
          " " +
          mouseFrom.y +
          " L " +
          mouseTo.x +
          " " +
          mouseFrom.y +
          " L " +
          mouseTo.x +
          " " +
          mouseTo.y +
          " L " +
          mouseFrom.x +
          " " +
          mouseTo.y +
          " L " +
          mouseFrom.x +
          " " +
          mouseFrom.y +
          " z";
        canvasObject = new fabric.Path(path, {
          left: left,
          top: top,
          stroke: color,
          strokeWidth: drawWidth,
          fill: "rgba(255, 255, 255, 0)"
        });
        //也可以使用fabric.Rect
        break;
      case "rightangle": //直角三角形
        var path = "M " + mouseFrom.x + " " + mouseFrom.y + " L " + mouseFrom.x + " " + mouseTo.y + " L " + mouseTo.x + " " + mouseTo.y + " z";
        canvasObject = new fabric.Path(path, {
          left: left,
          top: top,
          stroke: color,
          strokeWidth: drawWidth,

          fill: "rgba(255, 255, 255, 0)"
        });
        break;
      case "equilateral": //等边三角形
        var height = mouseTo.y - mouseFrom.y;
        canvasObject = new fabric.Triangle({
          top: mouseFrom.y,
          left: mouseFrom.x,
          width: Math.sqrt(Math.pow(height, 2) + Math.pow(height / 2.0, 2)),
          height: height,
          stroke: color,
          strokeWidth: drawWidth,
          fill: "rgba(255,255,255,0)"
        });
        break;
      case "isosceles":
        break;
      case "text":
        textbox = new fabric.Textbox("", {
          left: mouseFrom.x - 60,
          top: mouseFrom.y - 20,
          width: 150,
          fontSize: 18,
          borderColor: "#2c2c2c",
          fill: color,
          hasControls: false
        });
        canvas.add(textbox);
        textbox.enterEditing();
        textbox.hiddenTextarea.focus();
        break;
      case "path2":
		if(contentPath.length == 0){
			contentPath.push({x:mouseFrom.x,y:mouseFrom.y})
		}else{
			var obj = {
				x1:contentPath[contentPath.length - 1].x,
				y1:contentPath[contentPath.length - 1].y,
				x2:mouseTo.x,
				y2:mouseTo.y
			}
			var length = juli(obj)
			if(length > 10){
				contentPath.push({x:mouseTo.x,y:mouseTo.y})
			}
		}
		var strL = "L "
		var str = "M "+contentPath[0].x+" "+contentPath[0].y
		for (var i = 1; i < contentPath.length; i++) {
			var area = contentPath[i]
			str += strL + area.x + " " +area.y
		}
		str +="z";
		canvasObject =new fabric.Path(str,{
			stroke: color,
			strokeWidth: drawWidth,
			fill: "rgba(255, 255, 255, 0)",
			hasBorders:false,
			hasControls:false,
			hasRotatingPoint:false,
			name:"close"
		});
        break;
	  case "path":
		if(contentPath.length == 0){
			contentPath.push({x:mouseFrom.x,y:mouseFrom.y})
			canvasObject = new fabric.Polygon(contentPath, {
			  left: left,
			  top: top,
			  stroke: color,
			  strokeWidth: drawWidth,
			  fill: "rgba(255, 255, 255, 0)",
			  
			});
		}else{
			var obj = {
				x1:contentPath[contentPath.length - 1].x,
				y1:contentPath[contentPath.length - 1].y,
				x2:mouseTo.x,
				y2:mouseTo.y
			}
			var length = juli(obj)
			console.log(length);
			
			if(length > 10){
				contentPath.push({x:mouseTo.x,y:mouseTo.y})
				canvasObject = new fabric.Polygon(contentPath, {
				  left: left,
				  top: top,
				  stroke: color,
				  strokeWidth: drawWidth,
				  fill: "rgba(255, 255, 255, 0)"
				});
			}else{
				contentPath.push({x:obj.x1,y:obj.y1})
				canvasObject = new fabric.Polygon(contentPath, {
				  left: left,
				  top: top,
				  stroke: color,
				  strokeWidth: drawWidth,
				  fill: "rgba(255, 255, 255, 0)"
				});
			}
		}
		break;
      default:
		
        break;
    }
	
    if (canvasObject != null) {
      // canvasObject.index = getCanvasObjectIndex();
      canvas.add(canvasObject); //.setActiveObject(canvasObject)
      drawingObject = canvasObject;
    }
  }
	function juli(form) {       // 从form的表单中分别提取两个点的横、纵坐标
		var x1 = eval(form.x1);   // 第一个点的横坐标
		var y1 = eval(form.y1);   // 第一个点的纵坐标
		var x2 = eval(form.x2);   // 第二个点的横坐标
		var y2 = eval(form.y2);   // 第二个点的纵坐标
		var xdiff = x2 - x1;            // 计算两个点的横坐标之差
		var ydiff = y2 - y1;            // 计算两个点的纵坐标之差
		return Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);   // 计算两点之间的距离，并将结果返回表单元素
	}
  //绘制箭头方法
  function drawArrow(fromX, fromY, toX, toY, theta, headlen) {
    theta = typeof theta != "undefined" ? theta : 30;
    headlen = typeof theta != "undefined" ? headlen : 10;
    // 计算各角度和对应的P2,P3坐标
    var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
      angle1 = (angle + theta) * Math.PI / 180,
      angle2 = (angle - theta) * Math.PI / 180,
      topX = headlen * Math.cos(angle1),
      topY = headlen * Math.sin(angle1),
      botX = headlen * Math.cos(angle2),
      botY = headlen * Math.sin(angle2);
    var arrowX = fromX - topX,
      arrowY = fromY - topY;
    var path = " M " + fromX + " " + fromY;
    path += " L " + toX + " " + toY;
    arrowX = toX + topX;
    arrowY = toY + topY;
    path += " M " + arrowX + " " + arrowY;
    path += " L " + toX + " " + toY;
    arrowX = toX + botX;
    arrowY = toY + botY;
    path += " L " + arrowX + " " + arrowY;
    return path;
  }

  //获取画板对象的下标
  function getCanvasObjectIndex() {
    return canvasObjectIndex++;
  }
})();
